<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>hello</p>
        <button class="test" onclick="addComponent()">click</button>
    </div>
    <script>
        // var ps = document.getElementsByTagName('p')
        // console.log(ps[0])
        // ps[0].innerHTML = 'test'

        // div1 = document.createElement('div')
        // var divs = document.getElementsByTagName('div')
        // console.log(divs[0])
        // console.log(div1)
        // div1.appendChild(ps[0])

        // divs[0].appendChild(div1)

        function addComponent(){
            var divx = document.createElement('div')
            var divs = document.getElementsByTagName('div')
            var btx = document.createElement('button')
            var stl = document.createAttribute('class')
            stl.value = 'test'

            btx.setAttributeNode(stl)//只有属性设置时使用setAttributeNode()

            btx.addEventListener('click',addComponent)

            divx.appendChild(btx)

            divs[divs.length-1].appendChild(divx)

            console.log(divs[0])
            
        }
    </script>
    <style>
        body{
            display: flex;
        }
        div{
            display: flex;
            max-width: 100vw;
            flex-wrap:wrap;
        }
        .test {
            width: 50px;
            height: 25px;
            color: yellow;
            background-color: purple;

            border-radius: 10px;

            flex:0 0 50px;
        }
    </style>
</body>
</html>